<script setup lang="ts">
// 定义组件的属性
withDefaults(defineProps<Props>(), {
  loading: false,
  errorMessage: '',
  loadingText: '加载中...',
  showRetry: false,
})

// 定义组件的属性
interface Props {
  /** 是否显示加载状态 */
  loading?: boolean
  /** 错误信息 */
  errorMessage?: string
  /** 加载提示文本 */
  loadingText?: string
  /** 是否显示重试按钮 */
  showRetry?: boolean
}

// 定义事件
const emit = defineEmits<{
  /** 重试按钮点击事件 */
  retry: []
}>()

// 处理重试点击
function handleRetry() {
  emit('retry')
}
</script>

<template>
  <!-- 加载状态 -->
  <view v-if="loading" class="loading-container">
    <text class="loading-text">{{ loadingText }}</text>
  </view>

  <!-- 错误提示 -->
  <view v-else-if="errorMessage" class="error-container">
    <text class="error-text">{{ errorMessage }}</text>
    <!-- 重试按钮 -->
    <button v-if="showRetry" class="retry-btn" @click="handleRetry">
      重新加载
    </button>
  </view>
</template>

<style scoped>
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400rpx;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.error-text {
  font-size: 28rpx;
  color: #e74c3c;
  margin-bottom: 20rpx;
}

.retry-btn {
  margin-top: 20rpx;
  padding: 16rpx 48rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>